<template>
  <main role="main">

    <section class="jumbotron text-center">
      <div class="container">
        <h1>hermit在线课程平台</h1>
        <p class="lead text-muted">
          噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。
        </p>
        <p>
          <router-link to="/list" class="btn btn-dark my-2 p-3 font-weight-bold">所有课程</router-link>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#" class="btn btn-dark my-2 p-3 font-weight-bold">热门文章</a>
        </p>
      </div>
    </section>

    <div class="album py-5 bg-light">
      <div class="container">
        <!--最新上线-->
        <div class="title" ><h3>最新上线</h3></div>
        <hr>
        <div class="row badge-light" >
          <div v-for="newcourse in newcourses" :key="newcourse.num" class="col-md-4">
            <course-card v-bind:course="newcourse"></course-card>
          </div>
        </div>
        <hr>
        <!--热门课程-->
        <div class="title" >热门课程</div>
        <hr>
        <div class="row badge-light" >
          <div v-for="hotcourse in hotcourses" :key="hotcourse.num" class="col-md-4">
            <course-card v-bind:course="hotcourse"></course-card>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
  import CourseCard from "../components/the-course-card";
  export default {
    name:'index',
    components: {CourseCard},
    data:function (){
      return{
        newcourses:[],
        hotcourses:[],

      }
    },
    mounted() {
      let _this = this;
      _this.listNew();
      _this.listHot();
    },
    methods:{
      /**查询新上好课*/
      listNew(){
        let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/course/list-new').then((response)=>{
          console.log("查询新上好课：",response)
          let resp = response.data;
          if(resp.success){
            _this.newcourses = resp.content;
          }
        }).catch((response)=>{
          console.log("error",response);
        })
      },
      /**查询热门好课*/
      listHot(){
        let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/course/list-hot').then((response)=>{
          console.log("查询热门好课：",response)
          let resp = response.data;
          if(resp.success){
            _this.hotcourses = resp.content;
          }
        }).catch((response)=>{
          console.log("error",response);
        })
      },
    },
  }
</script>
<style>
  .title{
    margin-bottom: 2rem;
    color: transparent;
    -webkit-text-stroke: 1px black;
    letter-spacing: 0.04rem;
    font-size: 2rem;
  }
  .title_dot{
    background: #EEE url() repeat;
    text-shadow: 5px -5px black, 4px -4px white;
    font-weight: bold;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text
  }

</style>